<!--
 * @Description: 当月远动缺陷统计
 * @Author: Huang Junjie
 * @Date: 2021-06-01 15:19:28
 * @LastEditTime: 2021-06-24 15:35:35
 * @LastEditors: Huang Junjie
-->
<template>
  <div class="monthly-statistics-of-telecontrol-defects-style">
    <div class="component-inner-div">
      <!-- 四角样式 -->
      <div class="the-four-border the-four-border-01" />
      <div class="the-four-border the-four-border-02" />
      <div class="the-four-border the-four-border-03" />
      <div class="the-four-border the-four-border-04" />
      <!-- 四角样式 -->

      <!-- 标题栏 -->
      <div class="title">
        <div class="point-icon" />
        <span>当月远动缺陷统计</span>
      </div>
      <!-- 标题栏 -->

      <!-- 当月远动缺陷统计图表 -->
      <div
        id="PieChart02"
        class="echart01"
      />
      <!-- 当月远动缺陷统计图表 -->
    </div>
  </div>
</template>

<script>
import { PieChart01 } from './common/js/EchartsModel';

// 引入echarts
const echarts = require('echarts');

export default {
  mounted() {
    this.getPieChart01(); // 加载当月远动缺陷统计Echarts图表
  },
  methods: {
    // 加载当月远动缺陷统计Echarts图表
    getPieChart01() {
      const myChart = echarts.init(document.getElementById('PieChart02'));
      PieChart01(myChart); // 当月远动缺陷统计 - 饼状图
    }
  }
};
</script>

<style lang="scss" scoped>
.monthly-statistics-of-telecontrol-defects-style {
  position: relative;
  color: white;
  width: 454px;
  height: 250px;
  box-sizing: border-box;
  overflow: hidden;
  .component-inner-div {
    border: 2px solid #122a57;
    height: 100%;
    background-color: rgba($color: #0a1944, $alpha: 0.9);
    box-sizing: border-box;
    .title {
      color: #3695FF;
      font-size: 20px;
      padding: 0;
      margin: 20px 16px 0 16px;
      padding-bottom: 16px;
      align-items: center;
      display: flex;
      border-bottom: 1px solid #0b62a3;
      .point-icon {
        background-color: #3695FF;
        height: 10px;
        width: 10px;
        margin: 0 10px 0 0;
      }
    }
    .echart01 {
      width: 454px;
      height: 200px;
      margin: 0 auto;
    }
  }
}
</style>
